<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" >
      <template #default="scope">
        <img :src="scope.row.img">
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <!--   自定义列必须添加下面的template标签   -->
      <template #default="scope">
        <!--     scope.$index得到当前行的下标  scope.row得到当前行对应的对象 -->
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script  setup>

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    img: "https://img0.baidu.com/it/u=1368960797,2118841857&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=300"
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    img: "https://img0.baidu.com/it/u=1368960797,2118841857&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=300"
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    img: "https://img0.baidu.com/it/u=1368960797,2118841857&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=300"
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    img: "https://img0.baidu.com/it/u=1368960797,2118841857&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=300"
  },
]
const del = (index,row) => {
  console.log(index)
  console.log(row)
}
</script>
